<template>
  <div style="width: 800px; height: 600px" ref="chartsDOM"></div>
</template>

<script>
import * as echarts from "echarts";
import api from "@/api/index";
export default {
  name: "EchartMapHelloWorld",

  data() {
    return {};
  },

  mounted() {
    // 初始化统计图对象
    var myChart = echarts.init(this.$refs["chartsDOM"]);
    // 显示 loading 动画
    myChart.showLoading();
    // 再得到数据的基础上，进行地图绘制
    api.then((res) => {
      // 得到结果后，关闭动画
      myChart.hideLoading();
      // 注册地图(数据放在axios返回对象的data中哦)
      echarts.registerMap("cd", res.data);
      var option = {
        visualMap: {
          min: 1111,
          max: 333332,
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        tooltip: {},
        series: [
          {
            name: "成都地图",
            type: "map",
            map: "cd", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            label: {
              show: true,
            },
            data: [
              { name: "锦江区", value: 11111 },
              { name: "武侯区", value: 44441 },
              { name: "金牛区", value: 555525 },
              { name: "双流区", value: 88884 },
              { name: "温江区", value: 99999999 },
              { name: "成华区", value: 333332 },
            ],
          },
        ],
      };
      myChart.setOption(option);
    });
  },

  methods: {},
};
</script>

<style lang="scss" scoped></style>
